<!DOCTYPE HTML>
<html>
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- import start -->
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
	<script type="text/javascript" src="/jquery-validation/additional-methods.min.js"></script>
	<script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript" src="/layer/layer.js"></script>
	<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/js/common.js"></script>
	<script type="text/javascript" src="/js/md5.min.js"></script>
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<!-- import end -->
</head>

<style type="text/css">
	html,body{
		width: 100%;
		height: 100%;
	}
	body{
		background: url("img/loginBG.jpg") no-repeat;
		background-size: cover;
		background-position: center;
	}
	.login-box{
		text-align: center;
		width: 350px;
		margin-top: 10%;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(255,255,255,0.5);
	}
	.tab-content input{
		width:310px;
		height:36px;
		margin: 20px;
	}
	.tab-content button{
		width:310px;
		height:36px;
		margin: 20px;
	}

</style>

<body>
	<div class="container-fluid">

		<div class="panel panel-default login-box">
			<div class="" >
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#panel-login" data-toggle="tab">账户登录</a>
					</li>
					<li>
						<a href="#panel-regist" data-toggle="tab">免费注册</a>
					</li>
				</ul>
			</div>

			<div class="panel-body tab-content" >
				<div class="tab-pane active" id="panel-login">
					<form id="loginForm" type="post" >
						<div class="row">
							<input v-model="phone" type="text" placeholder="手机号码" required="true"  minlength="11" maxlength="11" />
						</div>

						<div class="row">
							<input v-model="password" type="password"  placeholder="密码" required="true" minlength="6" maxlength="16" />
						</div>

						<div class="row">
							<button type="button" class="btn btn-danger btn-block" @click="login()" >登&nbsp;&nbsp;&nbsp;录</button>
						</div>
					</form>
				</div>

				<div class="tab-pane" id="panel-regist">
					<form id="registForm">
						<div class="row">
							<input v-model="phone" type="text" placeholder="手机号码" required="true"  minlength="11" maxlength="11" />
						</div>

						<div class="row">
							<input v-model="nickname" type="text" placeholder="名称" required="true"  minlength="2" maxlength="11" />
						</div>

						<div class="row">
							<input v-model="password" type="password"  placeholder="密码" required="true" minlength="6" maxlength="16" />
						</div>
						<div class="row">
							<input v-model="password2" type="password"  placeholder="确认密码" required="true" minlength="6" maxlength="16" />
						</div>

						<div class="row">
							<button type="button" class="btn btn-danger btn-block" @click="regist()" >注&nbsp;&nbsp;&nbsp;册</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

</body>
<script>
	new Vue({
		el:"#registForm",
		data:{
			phone:'',
			nickname:'',
			password:'',
			password2:''
		},
		methods:{
			regist:function(){
				this.do_regist();
			},
			do_regist:function(){
				var self =this;
				if(this.password!=this.password2){
					layer.msg("两次密码不一致");
					this.password="";
					this.password2="";
					return;
				}else{
					var salt = g_passsword_salt;
					var str = ""+salt.charAt(6)+salt.charAt(2) + this.password + salt.charAt(1)+salt.charAt(4)+salt.charAt(0);
					var pass = md5(str);
				}
				g_showLoading();
				$.ajax({
					url: "/do_regist",
					type: "POST",
					data:{
						phone:self.phone,
						nickname:self.nickname,
						password: pass,
					},
					success:function(data){
						layer.closeAll();
						if(data.code == 0){
							layer.msg("注册成功");
							window.location.href="login.html";

						}else{
							layer.msg(data.msg);
						}
					},
					error:function(){
						layer.closeAll();
						layer.msg("客户端请求有误")
					}
				});
			}
		}
	});

	new Vue({
		el:"#loginForm",
		data:{
			phone:'',
			password:'',
		},
		methods:{
			login:function(){
				this.do_login();
			},
			do_login:function(){
				var self =this;
				var salt = g_passsword_salt;
				var str = ""+salt.charAt(6)+salt.charAt(2) + this.password + salt.charAt(1)+salt.charAt(4)+salt.charAt(0);
				var pass = md5(str);
				g_showLoading();
				$.ajax({
					url: "/do_login",
					type: "POST",
					data:{
						phone:self.phone,
						password: pass,
					},
					success:function(data){
						layer.closeAll();
						if(data.code == 0){
							layer.msg("登录成功");
							window.location.href="index.html";
						}else{
							layer.msg(data.msg);
						}
					},
					error:function(){
						layer.closeAll();
						layer.msg("客户端请求有误")
					}
				});
			}
		}
	});
</script>
</html>